<template>
  <div class="Homes">
    <!-- 筛选框 -->
    <div class="box-els box-sort">
      <el-form-item class="姓名">
        <el-input style="width:160px;" v-model="sortForm.name" placeholder="请输入姓名进行查询" />
      </el-form-item>
      <el-form-item class="姓名">
        <el-input style="width:160px;" v-model="sortForm.name" placeholder="请输入姓名进行查询" />
      </el-form-item>
      <el-button type="primary" style="margin-left:10px;"> 查询 </el-button>
    </div>
    <!-- 列表框 -->
    <div class="box-els box-table">
      <el-table :data="userData" border style="height:92%;">
        <el-table-column fixed type="index" label="编号" width="80" />
        <el-table-column fixed prop="date" label="日期" width="180" />
        <el-table-column prop="name" label="姓名" width="180" />
        <el-table-column prop="address" label="地址" />
        <el-table-column label="操作">
          <template #default="scope">
            <el-button size="small">查看</el-button>
            <el-button size="small" type="danger">删除</el-button>
          </template>
        </el-table-column>
        <template sloat="empty"> 没有更多数据 </template>
      </el-table>

      <!-- 分页器 -->
      <div class="box-els box-pagination">
        <!-- 
          :hide-on-single-page="value"
          当只有一页时开启一页隐藏
        -->
        <el-pagination
          size="default"
          page-size="30"
          pager-count="15"
          background
          layout="prev, pager, next"
          :total="1000"
        />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup name="User">
import { reactive } from "vue";
/*用户筛选 
    @params sortForm 用户筛选表单
  */
const sortForm = reactive({
  name:''
});
/* 用户列表
    @params userData 用户列表信息
  */
const userData = reactive([
  {
    date: "2016-05-03",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-02",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-04",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-01",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
]);
</script>

<style lang="scss">
.Homes {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content:space-between;
  .box-els {
    width: 100%;
    padding: 0 20px;
    background: #fff;
  }
  .box-sort {
    height: 18%;
    border-radius:10px 10px 0 0;
    padding:14px 20px;
  }
  .box-table {
    // margin-top:10px;
    height: calc(100% - 20%);
    border-radius:0 0 10px 10px;
    padding: 20px;
    // padding-bottom:0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items:center;
    // .el-table
    .box-pagination {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      bottom: 0;
    }
  }
}
</style>
